<template>
	<div>

		<el-row type="flex" class="row-bg" justify="space-between">
			<el-col :span="6">
				<div class="grid-content bg-purple">

					请选择班级<el-select v-model="valueClass" placeholder="请选择">
						<el-option v-for="item in formInline.options" :key="item.id"
							:label="item.grade+'级'+item.structure.major+'专业'+item.classes+'班'" :value="item.id">
						</el-option>
					</el-select>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="grid-content bg-purple-light">
					请选择课程
					<el-select v-model="valueCourse" placeholder="请选择课程">
						<el-option v-for="c in formInline.courses" :key="c.id" :label="c.courseName" :value="c.id">
						</el-option>
					</el-select>

				</div>
			</el-col>
			<el-col :span="6">
				<div class="grid-content bg-purple">

					请选择教师
					<el-select v-model="valueTeacher" placeholder="请选择教师">
						<el-option v-for="teacher in formInline.teachers" :key="teacher.id" :label="teacher.name"
							:value="teacher.id">
						</el-option>
					</el-select>
				</div>
			</el-col>
		</el-row>





		<div>
			<el-row align="middle">
				<el-col :span="24">
					<div class="grid-content bg-purple-dark">

						请选择时间
						<el-radio-group v-model="radio">
							<el-radio-button label="周一"></el-radio-button>
							<el-radio-button label="周二"></el-radio-button>
							<el-radio-button label="周三"></el-radio-button>
							<el-radio-button label="周四"></el-radio-button>
							<el-radio-button label="周五"></el-radio-button>
							<el-radio-button label="周六"></el-radio-button>
							<el-radio-button label="周日"></el-radio-button>
						</el-radio-group>
						<el-button type="primary" @click="onSubmit()">确定</el-button>

					</div>
				</el-col>
			</el-row>

		</div>
		<div>
			<el-row type="flex" class="row-bg" justify="space-between">
				<el-col :span="6">
					<div class="grid-content bg-purple">
						课程时间
						<el-select v-model="valueTime" placeholder="可选课程时间">
							<el-option v-for="item in options" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>

					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple-light">

						课程地点
						<el-select v-model="valueArea" placeholder="请选择课程地点">
							<el-option v-for="item in courseArea" :key="item.id"
								:label="item.areaPosition+''+item.areaFloor+'楼'+item.areaDetail+'室'" :value="item.id">
							</el-option>
						</el-select>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						课程分类
						<el-select v-model="valueCourseClassification" placeholder="请选择课程分类">
							<el-option v-for="item in courseClassification" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
			</el-row>
			<el-row type="flex" class="row-bg" justify="space-between">
				<el-col :span="6">
					<div class="grid-content bg-purple">
						课程学分
						<el-input placeholder="请输入课程学分" v-model="inputCourseCredit" style="width: 220px" clearable>
						</el-input>

					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple-light">
						课程人数
						<el-input placeholder="请输入课程最大人数" v-model="inputMaxPerson" style="width: 220px" clearable>
						</el-input>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						课程学期
						<el-select v-model="valueTerm" placeholder="请选择课程学期">
							<el-option v-for="item in terms" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
			</el-row>
		</div>
		<el-button type="primary" @click="addCourseManager">确定课程安排</el-button>
	</div>
</template>
<script>
	export default {
		name: "CourseManager",
		data() {
			return {
				courseClassification: [{
					value: 'b',
					label: '必修'
				}, {
					value: 'x',
					label: '选修'
				}],
				terms: [{
					value: '11',
					label: '大一上期'
				}, {
					value: '12',
					label: '大一下期'
				}, {
					value: '21',
					label: '大二上期'
				}, {
					value: '22',
					label: '大二下期'
				}, {
					value: '31',
					label: '大三上期'
				}, {
					value: '32',
					label: '大三下期'
				}, {
					value: '41',
					label: '大四上期'
				}, {
					value: '41',
					label: '大四下期'
				}],
				inputMaxPerson: '',
				inputCourseCredit: '',
				valueTerm: '',
				valueTime: '',
				valueArea: '',
				valueClass: '',
				valueCourse: '',
				valueTeacher: '',
				valueCourseClassification: '',
				courseArea: [],
				options: [],
				radio: '',
				formInline: {
					options: [],
					teachers: [],
					courses: [],
				},
				course: {
					courseNo: '',
					courseName: ''
				}
			}
		},
		methods: {
			handleChange(value) {
				console.log(value);
			},
			selectClass() {
				this.$axios({
					method: 'post',
					url: "/api/v1/class/list",
				}).then(r => {
					if (r.data.code == 200) {
						console.log(r);
						let placeList = r.data.data;
						let data = [];
						for (let p of placeList) {
							data.push(p)
						}
						this.formInline.options = data;
						console.log(this.formInline.options);
					}
				})
			},
			selectTeacher() {
				this.$axios({
					method: 'post',
					url: "/api/v1/teacher/getAll",
				}).then(r => {
					if (r.data.code == 200) {
						console.log(r);
						this.formInline.teachers = r.data.data;
						console.log(this.formInline.teachers);
					}
				})
			},
			selectCourse() {
				this.$axios({
					method: 'post',
					url: "/api/v1/course/list",
					data: this.course
				}).then(r => {
					if (r.data.code == 200) {
						console.log(r);
						this.formInline.courses = r.data.data;
						console.log(this.formInline.courses);
					}
				})
			},
			selectArea() {
				this.$axios({
					method: 'post',
					url: "/api/v1/courseManager/getArea",
				}).then(r => {
					console.log(r);
					if (r.data.code == 200) {
						console.log(r.data.data);
						this.courseArea = r.data.data.data;
					}
				})
			},
			onSubmit() {
				let timeVo = {
					week: this.radio,
					teacherId: this.valueTeacher,
					classId: this.valueClass
				}
				console.log(timeVo)
				this.$axios({
					method: 'post',
					url: "api/v1/courseManager/time",
					data: timeVo
				}).then(r => {
					if (r.data.code == 200) {
						this.options = r.data.data;
						console.log(r.data.data);
					}
				})
			},
			addCourseManager() {
				let courseManagerVo = {
					courseManager: {
						course: 
						{
							id:this.valueCourse,
						},
						courseStartTime: this.valueTime,
						area:
						 {
							 id:this.valueArea
						 },
						teacher: 
						{
							id:this.valueTeacher
						},
						courseMaxperson: this.inputMaxPerson,
						courseWeek: this.radio,
						courseCredit: this.inputCourseCredit,
						term: this.valueTerm,
						courseClassification: this.valueCourseClassification
					},
					classId: this.valueClass
				}
				console.log(courseManagerVo);
				this.$axios({
					method: 'post',
					url: "api/v1/courseManager/add",
					data: courseManagerVo
				}).then(r=>{
						if (r.data.code == 200) {
							console.log("添加成功")
						}
				})
			}
		},
		created() {
			this.selectClass();
			this.selectTeacher();
			this.selectCourse();
			this.selectArea();
		}
	};
</script>
<style>
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: Transparent;
	}

	.bg-purple {
		background: Transparent;
	}

	.bg-purple-light {
		background: Transparent;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: Transparent;
	}
</style>
